<template>
	<view class="dataStatisticsDL">
		<view class="dataStatisticsTopBox">
			<u-navbar title="运费记录" title-color="#333" back-icon-color="#333"></u-navbar>
			<view class="dataStatistics-date-dateChange">
				<view class="dataStatistics-date-startDate" @click='dateStart=true'>
					<text>{{dateStartStr}}</text>
				</view>
				<text class="iconfont iconxiala1"></text>
				<view class="dataStatistics-date-dateLine">至</view>
				<view class="dataStatistics-date-startDate" @click='dateEnd=true'>
					<text>{{dateEndStr}}</text>
				</view>
				<text class="iconfont iconxiala1"></text>
			</view>
			<view class="statistical-methods">
				<view class="statistical-methods-name statistical-methods-option" @click="cusQueryClick">
					<text>{{cusName}}</text>
				</view>
				<text class="iconfont iconxiala1"></text>
			</view>
		</view>
		<view class="statistics-banner">
			<view class="statistics-banner-box">
				<image src="https://xstadmin.oss-cn-beijing.aliyuncs.com/HFdriver/images/send.png"></image>
				<view class="statistics-banner-title-box">
					<view class="statistics-banner-title">运费统计</view>
					<view class="statistics-banner-list">
						<view>
							<view class="statistics-banner-name">总运费(元)</view>
							<view class="statistics-banner-number" v-if="AuthorizationOBJ.ORMTB417CA06==0">***</view>
							<view class="statistics-banner-number" v-else>{{totalFreight||0}}</view>
						</view>
						<view>
							<view class="statistics-banner-name">总车次</view>
							<view class="statistics-banner-number">{{totalCar||0}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="dataStatisList.length!=0"> -->
		<view class="statistics-list-con" v-if="dataStatisList.length!=0">
			<view class="dataStatistics-list-title">
				<view class="dataStatistics-carNumber statistics-list-con-bg">回执时间</view>
				<view class="dataStatistics-weight statistics-list-con-bg">车牌号</view>
				<view class="dataStatistics-weight statistics-list-con-bg">物料吨数</view>
				<view class="dataStatistics-weight statistics-list-con-bg">运费单价</view>
				<view class="dataStatistics-weight statistics-list-con-bg">总运费</view>
				<view class="dataStatistics-weight statistics-list-con-bg">配送地</view>
				<view class="dataStatistics-weight statistics-list-con-bg">配送工地</view>
				<!-- <view class="dataStatistics-weight statistics-list-con-bg">结算状态</view> -->
			</view>
			<view class="dataStatistics-list-ul">
				<view v-for="(item,index) in dataStatisList" :key='index'>
					<view class="dataStatistics-carNumber">{{item.SETTB405CA12}}</view>
					<view class="dataStatistics-weight">{{item.SETTB405CA00}}</view>
					<view class="dataStatistics-weight">{{item.SETTB405CA02}}</view>
					<view class="dataStatistics-weight" v-if="AuthorizationOBJ.ORMTB417CA06==0">***</view>
					<view class="dataStatistics-weight" v-else>{{item.SETTB405CA01}}</view>
					<view class="dataStatistics-weight" v-if="AuthorizationOBJ.ORMTB417CA06==0">***</view>
					<view class="dataStatistics-weight" v-else>{{item.SETTB405CA03}}</view>
					<view class="dataStatistics-weight">{{item.SETTB405CA08}}</view>
					<view class="dataStatistics-weight">{{item.SETTB405CA09}}</view>
					<!-- <view class="dataStatistics-weight">{{item.staticText}}</view> -->
				</view>
			</view>
		</view>
		<view class="sendorder-loadmore">
			<u-loadmore v-if="dataStatisList.length!=0" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
		<!-- 缺醒页 -->
		<view class="zanWSJ" v-if="dataStatisList.length==0">
			<image :src="getStaticFilePath('/QXY/noData.png')" alt="">
		</view>
		<u-picker v-model="dateStart" mode="time" :params="params" @confirm="dateStartConfirm"></u-picker>
		<u-picker v-model="dateEnd" mode="time" :params="params" @confirm="dateEndConfirm"></u-picker>
		<u-popup v-model="carshow" length="100%" mode="right" @close="carclose">
			<view class="iscar-nav">
				<view class="iscar-nav-top"></view>
				<view class="iscar-nav-search">
					<view class="iscar-nav-search-btn" @click="carshow=false">
						返回
					</view>
					<view class="iscar-nav-search-ipt">
						<u-search @custom="carcustom" @change="valChange" v-model="carSearch" :show-action="true" action-text="搜索"
						 :action-style="actionStyle"></u-search>
					</view>
				</view>
			</view>
			<view class="iscar-content">
				<view class="iscar-content-li" v-if="carnumlist.length!=0">
					<view v-for="(item, index) in carnumlist" :key="index" @click="cusListChange(item)">{{item.name}}</view>
				</view>
				<view class="zanWSJ" v-if="carnumlist.length==0">
					<image :src="getStaticFilePath('/QXY/noData.png')" alt="">
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: JSON.parse(uni.getStorageSync('userinfo')),
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				countpage: 1,
				page: 1,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				dateStart: false,
				dateStartStr: this.dateTransfor(new Date(), "yyyy-MM-dd" + " 00:00:00"),
				dateEnd: false,
				dateEndStr: this.dateTransfor(new Date(), "yyyy-MM-dd hh:mm:ss"),
				totalFreight: 0,
				totalCar: 0,
				dataStatisList: [],
				// 客户搜索
				actionStyle: {
					backgroundColor: '#00a1f1',
					color: '#FFF',
					width: '100rpx',
					height: '60rpx',
					lineHeight: '60rpx',
					borderRadius: '15rpx',
					margin: '0 20rpx',
				},
				cusName: '全部车牌号',
				carshow: false,
				carnumlist: [],
				carSearch: '',
				AuthorizationOBJ:'',
				
			}
		},
		onShow() {
			
			this.dataList()
			if(this.userinfo.sign == 'CUS-3'){
				this.queryAuthorization()
			}
		},
		onReachBottom() {
			if (this.page == this.countpage) {
				return this.status = "nomore"
			}
			this.page++
			this.dataList()
		},
		methods: {
			queryAuthorization(){//查询子账户权限
				uni.showLoading({
					title: '加载中...',
					mask:true
				});
				uni.request({
					url: this.baseUrl + '/orm/ormtb417/selectAccess/'+this.userinfo.ORMTB417ID, 
					method: 'GET',
					success: (res) => {
						console.log(res);
						uni.hideLoading();
						if (res.data.code == 200) {	
							this.AuthorizationOBJ=res.data.data
						}else{
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'default',
								icon:false
							})
						}
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon:false
						})
					}
				});
			},
			dataList() {
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				// this.status = "loading"
				if(this.cusName=='全部车牌号'){
					var cusName=''
				}else{
					var cusName=this.cusName
				}
				var ORMTB440CA02=''
				if(this.userinfo.sign=='CUS-2'||this.userinfo.sign=='CUS-3'){
					ORMTB440CA02=this.userinfo.ORMTB410ID
				}
				var ORMTB440CA26=''
				if(this.userinfo.sign=='CUS-3'){
					ORMTB440CA26=this.userinfo.ORMTB417ID
				}
				uni.request({
					url: this.baseUrl + '/set/settb405/selectPageList',
					method: 'POST',
					dataType: 'json',
					data: {
						"SETTB405CA00":cusName,
						"SETTB405CA05":ORMTB440CA02,
						"ORMTB440CA26":ORMTB440CA26,
						"startTime":this.dateStartStr,
						"endTime":this.dateEndStr,
						"page":this.page,
						"limit":10
					},
					success: (res) => {
						uni.hideLoading();
						console.log(res);

						if (res.data.code == 200) {
							if (!res.data.data || res.data.data == null) {
								this.dataStatisList = []
								this.page = 1
								this.countpage = 1
								return
							}
							var data = res.data.data.settb405s || []
							data.forEach(item=>{
								if(item.ORMTB440CF02==1){
									item.staticText='已结算'
								}else{
									item.staticText='未结算'
								}
							})
							if (this.page > 1) {
								this.dataStatisList = [...this.dataStatisList, ...data]
							} else {
								this.dataStatisList = data
							}
							
							this.totalFreight=res.data.data.count.money||0
							this.totalCar=res.data.data.count.count||0
							this.countpage = Math.ceil(res.data.count.count / 10)
						} else {
							this.dataStatisList = []
							this.page = 1
							this.countpage = 1
							uni.showToast({
								title: res.data.message,
								duration: 5000,
								icon: 'none',
							});
						}
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
					},
					fail: (res) => {
						if (this.countpage == this.page) {
							this.status = "nomore"
						} else {
							this.status = "loadmore"
						}
						uni.hideLoading();
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				});
			},
			searchPOST() {
				this.carnumlist = []
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				if (this.userinfo.sign == 'CUS-1') {
					var ID = this.userinfo.ORMTB400ID
				} else if (this.userinfo.sign == 'CUS-2'||this.userinfo.sign == 'CUS-3') {
					var ID = this.userinfo.ORMTB410ID
				}
				uni.request({
					url: this.baseUrl + '/orm/ormtb440/selectSettb402',
					method: 'POST',
					dataType: 'json',
					data: {
						sign: this.userinfo.sign,
						SETTB402CA00: this.carSearch,
						ID: ID,
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							var data = res.data.data
							if (!res.data.data || res.data.data == null) {
								this.carnumlist = []
							} else {
								this.carnumlist = [{
										id: '',
										name: '全部车牌号',
									}]
								data.forEach(item => {
									this.carnumlist.push({
										name: item.SETTB402CA00,
									})
								})
							}

						}
						uni.hideLoading();
					},
					fail: (res) => {
						uni.hideLoading();
						this.$refs.uToast.show({
							title: res.errMsg,
							type: 'default',
							icon: false
						})
					}
				});
			},
			carcustom() {
				this.searchPOST();
			},
			valChange() { //输入input发生变化
				this.carnumlist = []
				this.carSearch = this.carSearch.toUpperCase()
				this.searchPOST();
			},
			cusQueryClick() {
				this.carshow = true
				this.searchPOST();
			},
			cusListChange(item) {
				this.cusName = item.name
				this.dataList()
				this.carshow = false
			},
			carclose() {
				this.carSearch = ''
			},
			dateStartConfirm(e) {
				// console.log(e)
				var data = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				if (data > this.dateEndStr) return uni.showToast({
					title: '开始时间应早于结束时间',
					duration: 5000,
					icon: 'none',
				});
				this.dateStartStr = data
				this.dataList()
			},
			dateEndConfirm(e) {
				// console.log(e)
				var data = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				if (data < this.dateStartStr) return uni.showToast({
					title: '结束时间应晚于开始时间',
					duration: 5000,
					icon: 'none',
				});
				this.dateEndStr = data
				this.dataList()
			},
			dateTransfor(date, format) {
				var o = {
					"M+": date.getMonth() + 1,
					"d+": date.getDate(),
					"h+": date.getHours(),
					"m+": date.getMinutes(),
					"s+": date.getSeconds(),
					"q+": Math.floor((date.getMonth() + 3) / 3),
					"S": date.getMilliseconds()
				};
				if (/(y+)/.test(format)) {
					format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (let k in o) {
					if (new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
					}
				}
				return format;
			},
		}
	}
</script>

<style scoped>
	/* .dataStatisticsDL{
		background: #F2F2F2;
		min-height: 100vh;
		min-width: 100vw;
		box-sizing: border-box;
	} */
	.sendorder-loadmore {
		/* background-color: #e3e3e3; */
		padding: 20rpx 0 20rpx 0;
	}

	.dataStatisticsDL .zanWSJ {
		width: 100%;
		min-height: 400rpx;
		font-size: 18rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.dataStatisticsDL .zanWSJ>image {
		width: 315rpx;
		height: 365rpx;
	}

	.dataStatisticsDL .dataStatisticsTopBox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 223;
	}


	/* 时间 */
	.dataStatistics-date-dateChange {
		/* margin-top: 2rpx; */
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 4rpx 60rpx;
		background: #fff;
	}

	.dataStatistics-date-startDate {
		width: 239rpx;
		color: #808080;
		font-size: 26rpx;
		text-align: center;
	}

	.dataStatistics-date-dateLine {
		font-size: 28rpx;
		color: #333333;
		margin: 0 50rpx;
	}

	.statistical-methods {
		width: 100%;
		/* margin-top: 2rpx; */
		padding: 15rpx 60rpx;
		background: #fff;
		font-size: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: 1px solid rgba(153, 153, 153, 0.3);
		border-bottom: 1px solid rgba(153, 153, 153, 0.3);
	}

	.statistical-methods-name {
		/* width: 239rpx; */
		width: 100%;
		display: inline-block;
		text-align: center;
		font-size: 28rpx;
		color: #808080;
	}

	.statistical-methods-option {
		/* margin-left: 2.2rem; */
		color: #333;
	}

	/* banner */
	.statistics-banner {
		width: 100%;
		margin-top: 299rpx;
		padding: 40rpx 24rpx;
		background-color: #fff;
	}

	.statistics-banner-box {
		width: 100%;
		height: 310rpx;
		position: relative;
	}

	.statistics-banner-box image {
		width: 100%;
		height: 100%;
	}

	.statistics-banner-title-box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.statistics-banner-title {
		margin: 60rpx 0 50rpx 40rpx;
		font-size: 42rpx;
		color: rgba(255, 217, 25, 1);
	}

	.statistics-banner-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		flex-direction: row;
		align-items: center;
		text-align: center;
	}

	.statistics-banner-name {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 1);
	}

	.statistics-banner-number {
		font-size: 36rpx;
		color: rgba(255, 255, 255, 1);
	}

	/* 列表 */
	.dataStatistics-list-title {
		width: 100%;
		font-size: 0;
		padding: 0 24rpx;
		/* background: #F2F2F2; */
	}

	.dataStatistics-list-title>view {
		display: inline-block;
		font-size: 24rpx;
		text-align: center;
		color: #999;
		padding: 18rpx 5rpx;
	}

	.dataStatistics-carNumber {
		width: 280rpx;
		overflow: hidden;
	}

	.dataStatistics-weight {
		width: 200rpx;
		overflow: hidden;
	}

	.dataStatistics-money {
		width: 260rpx;
		overflow: hidden;
	}

	.dataStatistics-trainNumber {
		width: 86rpx;
		overflow: hidden;
	}

	.dataStatistics-details {
		width: 72rpx;
		overflow: hidden;
	}

	.dataStatistics-list-ul {
		margin-bottom: 144rpx;
		background-color: #fff;
		font-size: 0;
		padding: 0 24rpx;
	}

	.dataStatistics-list-ul>view>view {
		display: inline-block;
		font-size: 28rpx;
		padding: 23rpx 0;
		color: #333;
		text-align: center;
	}

	.statistics-list-con {
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: auto;
	}

	.statistics-list-con-bg {
		background: rgba(224, 247, 255, 1);
	}

	.statistics-list-con-border {
		border-bottom: 1px solid #e3e3e3;
	}

	/*去掉横拉条*/

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: #fff;
	}

	/* 客户搜索 */
	.iscar-nav {
		position: fixed;
		top: 0;
		width: 100%;
		height: 18vh;
		box-sizing: border-box;
		z-index: 2;
	}

	.iscar-content {
		margin-top: 18vh;
	}

	.iscar-content-li view {
		padding: 0 30rpx;
		line-height: 60rpx;
		border-bottom: 1px solid rgba(153, 153, 153, 0.3);
	}

	.iscar-nav-top {
		height: 10vh;
		background-color: #e3e3e3;
	}

	.iscar-nav-search {
		display: flex;
		background-color: #e3e3e3;
		padding-bottom: 20rpx;
	}

	.iscar-nav-search-ipt {
		flex: 1;
	}

	.iscar-nav-search-btn {
		width: 100rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		color: #333;
		margin: 0 20rpx;
	}

	.iscar-nav-btn {
		display: flex;
		justify-content: space-between;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		color: #333;
		padding: 0 20rpx;
		border: 2rpx solid #e3e3e3;
		background-color: #fff;
	}

	.iscar-nav-btn view+view {
		color: #02a2f4;
	}

	.iscar-nav-btn view {
		width: 100rpx;
		text-align: center;
	}

	.sendcar-addcar {
		padding: 20rpx 20rpx;
		color: #02a2f4;
		font-size: 26rpx;
		background-color: #fff;
	}

	.sendcar-bottom-height {
		height: 120rpx;
	}

	.sendcar-bottome-nav {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: flex;
		height: 120rpx;
		overflow: hidden;
		box-sizing: border-box;
		z-index: 2;
		background-color: #fff;
	}

	.sendcar-bottome-nav-l {
		flex: 1;
		text-align: right;
		padding-right: 20rpx;
		margin-top: 20rpx;
	}

	.sendcar-bottome-nav-l-t {
		height: 40rpx;
		font-size: 34rpx;
		color: #333;
		overflow: hidden;
	}

	.sendcar-bottome-nav-l-b {
		height: 40rpx;
		overflow: hidden;
		font-size: 24rpx;
		color: #999;
	}

	.sendcar-bottome-nav-l-b text {
		margin-right: 10rpx;
	}

	.sendcar-bottome-nav-r>button {
		display: inline-block;
		height: 120rpx;
		line-height: 120rpx;
		color: #FFF;
		background-color: #02a2f4;
		/* background-color: #e5c000; */
		font-size: 32rpx;
	}

	.sendcar-bottome-nav-r>button+button {
		background-color: #02a2f4;
		margin-left: 5rpx;
	}
</style>
